<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>定制包车</title>
<link rel="stylesheet" href="${ctxStatic }/gov/css/govcustom.css" />
<link rel="stylesheet" href="${ctxStatic }/gov/css/gov_total.css" />
<link rel="stylesheet" href="${ctxStatic }/gov/My97DatePicker/govsk/skin/WdatePicker.css" />
<link href="${ctxStatic }/cityselector/cityselect.css" rel='stylesheet' type='text/css' />
<script src="${ctxStatic }/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=kOQ8j9rd2ATw2R54boLMFUalu3gGNGDO&s=1"></script>
<script src="${ctxStatic}/jquery/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctxStatic }/gov/js/messages_zh.js"></script>
<script type="text/javascript" src="${ctxStatic }/gov/js/cityselect.js"></script>
<script type="text/javascript" src="${ctxStatic }/gov/js/gov.js"></script>
<script type="text/javascript">
//百度地图API功能
function G(id) {
	return document.getElementById(id);
}
var map = new BMap.Map("l-map");
var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
	{"input" : "suggestId"
	,"location" : map
});
ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
var str = "";
	var _value = e.fromitem.value;
	var value = "";
	if (e.fromitem.index > -1) {
		value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	}    
	str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
	value = "";
	if (e.toitem.index > -1) {
		_value = e.toitem.value;
		value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	}    
	str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
	G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
var _value = e.item.value;
	myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
	setPlace();
	// 选中详细地址后，调用百度地图获取 云地理编码 
	var address = encodeURIComponent(myValue);
	$.getJSON(
			"https://api.map.baidu.com/cloudgc/v1?ak=kOQ8j9rd2ATw2R54boLMFUalu3gGNGDO&s=1&address="+address+"&callback=?",
			function(data){
			if(data.status == 0 && data.result.length>0 ){
				$('#departcityName').val(data.result[0].address_components.city);
				var $sitename = $('#departcityName').val();
				$.post("${ctxFront}/sms/getSiteId","sitename="+$sitename,function(d){
					if(d!=null&&d!=''){
						$("#siteid").val(d);
					}else{
						$("#siteid").val("");
					}
				});
			}
		});
});
function setPlace(){
	map.clearOverlays();    //清除地图上所有覆盖物
	function myFun(){
		var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
		map.centerAndZoom(pp, 18);
		map.addOverlay(new BMap.Marker(pp));    //添加标注
	}
	var local = new BMap.LocalSearch(map, { //智能搜索
	  onSearchComplete: myFun
	});
	local.search(myValue);
}
</script>

<script>
	$(function() {
				// 初始化站点选择框
				$.post('${ctxFront}/info/site/siteJson', {
					spottypes : '0'
				}, function(data) {
					var allCity = data;//['北京市#001#1|beijing|bj','上海市#002#0|shanghai|sh'];
					new Vcity.CitySelector({
						input : 'departcityName',
						cityData : allCity
					});
					new Vcity.CitySelector({
						input : 'destcityName',
						cityData : allCity
					});
				});
				/*定制包车校验*/
				/*表单验证*/
				$('#custfo').validate({
					rules : {
						rentdays : "required",
						vehiclenum : "required",
						'destcity.sitename': "required",
						contactor: "required",
						contactphone : {
							required : true,
							isMobile : true
						}
					},
					messages : {
						
						rentdays:"<i class='verico'></i>请输入包车天数",
						vehiclenum : "<i class='verico'></i>请输入用车数量",
					    'destcity.sitename': "<i class='verico'></i>请输入目的地",
					    contactor: "<i class='verico'></i>请输入联系人",
						payertel : {
							required : "<i class='verico'></i>请输入手机号码",
							isMobile : "<i class='verico'></i>请输入正确手机号码"
						}
					}

				});
				/*手机验证*/
				jQuery.validator
						.addMethod(
								"isMobile",
								function(value, element) {
									var length = value.length;
									var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
									return this.optional(element)
											|| (length == 11 && mobile
													.test(value));
								}, "请正确填写您的手机号码");
				
				
				//城市验证
				$('.govload-btn').click(function(){
				    var cityval=$('#departcityName').val();
				    var dateval=$('#suggestId').val();
				    $('#citydate').remove();
				   		if(cityval==''||dateval==''){
					    	$('#suggestId').after("<div id='citydate'><i class='verico'></i>请输入上车地点</div>")
					    	 return false;
				   		}   	
				
			})
	})
</script>
</head>
<style>
		*{
			margin: 0;
			padding: 0;
			font-family: "microsoft yahei";
		}
		#gov_eject{
			position: fixed;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			text-align: center;
		}
		.gov_eject_box{
			display: inline-block;
			width:350px;
			height: 150px;
			padding: 20px;
			background: #fff;
			text-align: left;
			margin-top: 15%;
		}
		.gov_eject_box p:nth-child(1){
			text-align: center;
			padding: 10px 0;
			font-size: 16px;
			color: #333;
		}
		.gov_eject_box p:nth-child(2){
			padding: 10px 0;
			font-size: 14px;
			color:#01BAB4;
		}
		.gov_eject_box p:nth-child(3){
			text-align: center;
			margin-top: 15px;
		}
		.gov_eject_box p button{
			border: 0;
			background: #01C7C1;
			color: #fff;
			width: 120px;
			height: 30px;
			border-radius:3px ;
		}
	</style>
<body>
	<%@include file="../index/head.jsp"%>
	<div id="custom_h">
		<div class="custom_main">
			<div class="custom_abside">
				<div class="coutom_col">
					<a href="${ctxGov }/customRent" class="cou-col-b">定制包车 </a>
				</div>
				<div class="coutom_col" style="margin-top: 20px;">
					<a href="${ctxGov }/myCustomRent">我的需求</a>
				</div>
			</div>
			<div class="custom-body">
				<div class="custom_wrap col-wl-a">
					<form class="cout-f-in" id="custfo" action="${ctxGov }/saveDemand"	method="post">
						<div class="custom_list">
							<div class="custom-car-im clearfix">
								<h5>用车信息</h5>
								<div class="car-im-in">
									<label> <span class="car_im_tit">用车时间：</span> <input
										type="text" placeholder="选择日期" class="custom-day Wdate"
										name="fromdate"
										value="<fmt:formatDate value="${tDemands.fromdate}" pattern="yyyy-MM-dd HH:mm"/>"
										onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false,maxDate:'${maxDay }',minDate:'%y-%M-%d'})"
										id="coutm-time" readonly="readonly" />
									</label>
								</div>
								<div class="car-im-in">
									<label> <span class="car_im_tit">包车天数：</span> <input
										type="number" min="1" max="10" class="cus_t_days required" value="1" id="cus_t_day"
										name="rentdays" />
									</label>
								</div>
								<div class="car-im-in">
									<label> <span class="car_im_tit">选择车型：</span> <select
										name="cargotypeid" class="cars_mn ">
											<c:forEach items="${cargotypeList }" var="cargotype">
												<option value="${cargotype.cargotypeid }">${cargotype.typename }</option>
											</c:forEach>
									</select>
									</label>
								</div>
								<div class="car-im-in">
									<label> <span class="car_im_tit">用车数量：</span> <input
										type="number" min="1" max="10" class="cus_v_num required" value="1" id="vehnum"
										name="vehiclenum" />
									</label>
								</div>
							</div>
							<div class="custom-car-im clearfix">
								<h5>行程备注：</h5>
								<div class="car-im-in">
									   <span class="car_im_tit">上车地点：</span> 
									   <input type="text" placeholder="填写城市" class="custom-city"
										id="departcityName" name="departcity.sitename"	autocomplete="off" /> 
									   <input type="hidden"  name="departcity.siteid" id="siteid">
									   <input	type="text" placeholder="街道名称/地点" class="custom-dress"
										id="suggestId" name="sendAddress" style="width: 160px" />
									   <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
								</div>
								<div class="car-im-in">
									<label> <span class="car_im_tit">目的地：</span> <input
										type="text" class="destatil required" placeholder="请填写抵达城市"
										id="destcityName" name="destcity.sitename" autocomplete="off" />
										<input type="hidden" name="destcity.siteid">
									</label>
								</div>
								<div class="car-im-in">
									<label> <span class="car_im_tit" style="margin-top: 0;">行程备注：</span>
										<textarea class="coutom_explan "
											placeholder="请详细填写到达地点或多个目的地地点……" id="coutom-t"
											name="modeldesc"></textarea>
									</label>
								</div>
								<div class="car-im-in">
									<label> <span class="car_im_tit">联系人：</span> <input
										type="text" value="" id="l-ne" name="contactor"
										class="coutom_link required" placeholder="请填写联系人姓名" />
									</label>
								</div>
								<div class="car-im-in">
									<label> <span class="car_im_tit">联系电话：</span> <input
										type="text" class="coutom_link required" id="l-pe" name="contactphone" value="${tel}"
										placeholder="请填写联系电话" />
									</label>
								</div>
							</div>
							<div class="coutom-btn">
								<input type="submit" value="提交" class="govload-btn" />
							</div>
						</div>
					</form>
					<div class="custom_img">
						<img src="${ctxStatic }/gov/img/gov_caroa.png" />
					</div>
				</div>

			</div>
		</div>
	</div>
	<div id="gov_eject" style="display: none;">
			  <div class="gov_eject_box">
			  	     <p>提交成功</p>
			  	     <p>正在对您的需求进行报价，请耐心等候，为保证您的顺利用车，获得报价响应后请尽快确认支付。</p>
			         <p style="display: none;">
			        	<button type="button">确定</button>
			         </p>
			  </div>
		</div>
	
	<%@include file="../index/foot.jsp"%>
</body>
</html>